<template>
	<view :class="['retailDetails',{ryStateDetails:data.prescription.rxState == 4}]">
		<view class="user_header">
			<view class="user_header_item">
				<text>患者姓名:</text>{{data.patient.name}}
			</view>
			<view class="user_header_item">
				<text>性 别:</text>{{data.patient.gender == 1?'女':'男'}}
			</view>
			<view class="user_header_item">
				<text>出生年月:</text>{{data.patient.birthday}}
			</view>
			<view class="user_header_item">
				<text>年 龄:</text>{{data.patient.age}}
			</view>
			<view class="user_header_item">
				<text>联系方式:</text>{{data.patient.tel}}
			</view>
		</view>

		<ul class="detail_ul">
			<li class="li_title">药品信息</li>
			<li class="detail_li" v-for="item in data.prescriptionDetails" :key="item.id">
				<view class="detail_info">
					<view class="info_top">
						<text class="name">{{item.name}}</text>
						零售价:
						<text class="money">￥{{item.amt}}</text>
					</view>
					<view class="info_bottom">
						<text class="specification">{{item.specification}}</text>
						<text class="manufacturer">{{item.manufacturer}}</text>
					</view>
				</view>
				<view class="cnt">
					{{item.cnt + item.unit}}
				</view>
			</li>
		</ul>

		<view class="settlement" v-if="data.prescription.rxState != 4">
			<text>￥{{data.settlement.receivable}}</text>
			<view @click="settlementFn(data.prescription.rxState)"
				:class="['settlement_btn',data.prescription.rxState ==2?'red':'green']">
				{{data.prescription.rxState ==2?'退费':'补交'}}
			</view>
		</view>

		<uni-popup ref="popup" class="pay" :mask-click="false">
			<view class="popup-content">
				<div class="popup_title">
					{{data.prescription.rxState ==2?'退费信息确认':'补交'}}
				</div>
				<view class="Refund" v-if="data.prescription.rxState ==2">
					<view class="function">
						<text>收费方式:</text>{{data.settlement.weChat == 0?'支付宝:'+data.settlement.alipay:'微信:'+data.settlement.weChat }}元
					</view>
					<view class="desc">
						<text>退费说明:</text>
						<uni-easyinput type="textarea" v-model="data.value" placeholder="请输入内容"></uni-easyinput>
					</view>
				</view>
				<view class="repair" v-if="data.prescription.rxState ==3">
					<ul class="repair_ul">
						<li class="repair_title">
							收费信息
						</li>
						<li class="repair_li">
							<text>总金额:</text>￥{{AllMoney}}
						</li>
						<li class="repair_li">
							<text>优惠方式:</text>
							优惠金额<uni-easyinput class="uni-mt-5" @blur="value1Change" v-model="fromData.value1"
								trim="all" placeholder="0.00"></uni-easyinput>元
							<text class="text_margin">折扣</text><uni-easyinput class="uni-mt-5" trim="all"
								@blur="value2Change" v-model="fromData.value2" placeholder="0"></uni-easyinput>
						</li>
						<li class="repair_li">
							应收金额:<text class="red">￥{{money}}</text>
						</li>
						<li class="repair_li">
							<text>欠费金额:</text><uni-easyinput v-model="fromData.value3"
								placeholder="0.00"></uni-easyinput>元
							<uni-data-checkbox multiple @change="value4Change" v-model="fromData.value4"
								:localdata="data.hobby">全部欠费</uni-data-checkbox>
						</li>
						<li class="repair_li">
							<text>备注:</text><uni-easyinput v-model="fromData.value5"
								placeholder="请输入备注"></uni-easyinput>
						</li>
					</ul>
				</view>
				<view class="Method_title" v-if="data.prescription.rxState ==2">
					退款方式
				</view>
				<view class="RefundMethod">
					<view class="Method_title" v-if="data.prescription.rxState ==3">
						支付方式
					</view>
					<ul class="pay_ul">
						<li :class="['pay_li',{'active':data.payId == item.id}]" v-for="item in data.payList"
							:key="item.id" @click="data.payId = item.id">
							{{item.name}}
						</li>
					</ul>
				</view>
				<view class="popup_btn">
					<view class="close" @click="popup.close()">
						取消
					</view>
					<view class="enter" @click="enterPay(data.prescription.rxState)">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		getDetailApi,
		refundOrder,
		refund
	} from "@/api/retailrecords/index.js"
	import {
		setplaceAnOrderApi,
		settlement
	} from "@/api/retail/index.js"
	import {
		ref,
		reactive,
		computed,
		onMounted,
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	onLoad((option) => {
		data.query.id = option.id
		uni.setNavigationBarTitle({
			title: option.rxState == '2' ? '收费详情' : '补交详情'
		})
	})
	const popup = ref()
	const fromData = reactive({
		value1: '',
		value2: '',
		value3: '',
		value4: [],
		value5: '',
	})
	const data = reactive({
		value: '',
		payId: '',
		dialogTitle: '',
		parentId: '',
		query: {},
		refundQuery: {
			OriginalOrderNumber: '',
			Settlement: {},
			prescriptionDetails: []
		}, // 退费参数
		settlement: {},
		settlement_query: {},
		prescription: {},
		patient: {},
		prescriptionDetails: [],
		payList: [{
				name: '现金',
				id: 1,
			},
			{
				name: '支付宝',
				id: 2,
			},
			{
				name: '微信',
				id: 3,
			},
			{
				name: '银行卡',
				id: 4,
			},
			{
				name: '商保',
				id: 5,
			},
			{
				name: '其他',
				id: 6,
			}
		],
		hobby: [{
			text: '全部欠费',
			value: 0
		}],
	})
	const money = ref(0)
	let AllMoney = computed(() => {
		let num = 0
		data.prescriptionDetails.forEach(item => {
			num += (item.pric * item.sinDoscnt)
		})
		money.value = num
		return (num+'') == 'NaN' ? 0 : num
	})
	onMounted(() => {
		getDatails()
	})
	// 获取详情
	const getDatails = async () => {
		await getDetailApi(data.query).then((res) => {
			if (res.code == 200) {
				console.log(res);
				data.settlement = res.data.settlement
				data.patient = res.data.patient
				data.prescription = res.data.prescription
				data.prescriptionDetails = res.data.prescriptionDetails
			}
		})
	}
	const value1Change = () => {
		if (fromData.value1) {
			fromData.value2 = ''
		}
		if (fromData.value1 > AllMoney.value) {
			fromData.value1 = AllMoney.value
			money.value = 0
		} else {
			money.value = AllMoney.value - fromData.value1
		}
	}
	const value2Change = () => {
		if (fromData.value2) {
			fromData.value1 = ''
		}
		money.value = AllMoney.value * (fromData.value2 / 10)
	}
	const value4Change = () => {
		if (fromData.value4.length > 0) fromData.value3 = AllMoney.value
		else fromData.value3 = ''
	}
	const settlementFn = async (state) => {
		if (state == 2) {
			let res = await refundOrder({
				id: data.prescription.id
			})
			if (res.code == 200) {
				data.refundQuery = {
					OriginalOrderNumber: res.data.originalOrderNumber,
					Settlement: res.data.settlement,
					prescriptionDetails: res.data.prescriptionDetails
				}
				popup.value.open('bottom')
			} else {
				uni.showToast({
					duration: 2000,
					title: res.msg,
					icon: 'error'
				})
			}
		} else {
			let {
				patient,
				prescriptionDetails
			} = data
			let res = await setplaceAnOrderApi({
				patient,
				prescriptionDetails
			})
			if (res.code == 200) {
				data.settlement_query = res.data
				popup.value.open('bottom')
			} else {
				uni.showToast({
					duration: 2000,
					title: res.msg,
					icon: 'error'
				})
			}
		}

	}
	const enterPay = async (state) => {
		if (state == 2) {
			if (!data.payId) {
				uni.showToast({
					duration: 2000,
					title: "请选择退款方式",
					icon: 'error'
				})
				return
			}
			let res = await refund(data.refundQuery)
			if (res.code == 200) {
				uni.showToast({
					duration: 2000,
					title: res.msg,
					icon: 'success'
				})
				data.payId = ''
				popup.value.close()
			} else {
				uni.showToast({
					duration: 2000,
					title: res.msg,
					icon: 'error'
				})
			}
		} else {
			let res = await settlement(data.settlement_query)
			if (res.code == 200) {
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'success'
				})
				popup.value.close()
				fromData.value1 = ''
				fromData.value2 = ''
				fromData.value3 = ''
				fromData.value4 = []
				fromData.value5 = ''
			} else {
				uni.showToast({
					title: res.msg,
					duration: 1500,
					icon: 'error'
				})
			}
		}


	}
</script>

<style lang="scss" scoped>
	.retailDetails {
		width: 100%;
		height: calc(100vh - 100rpx);
		background-color: #fafafa;
		overflow-y: auto;

		.user_header {
			width: 100%;
			background-color: #fff;
			padding: 0rpx 20rpx;
			box-sizing: border-box;

			.user_header_item {
				line-height: 80rpx;
				font-size: 26rpx;
				border-bottom: 1rpx #fafafa solid;

				text {
					margin-right: 20rpx;
				}

				&:last-child {
					border: unset;
				}
			}
		}

		.detail_ul {
			width: 100%;
			background-color: #fff;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.li_title {
				font-size: 26rpx;
				line-height: 80rpx;
				border-bottom: 1rpx #fafafa solid;
			}

			.detail_li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx 0rpx;

				.detail_info {
					.info_top {
						color: #888888;
						font-size: 26rpx;

						.name {
							color: #000;
							margin-right: 10rpx;
						}

						.money {
							color: red;
							margin-left: 10rpx;
						}
					}

					.info_bottom {
						color: #888888;
						font-size: 26rpx;
						margin-top: 10rpx;

						.manufacturer {
							margin-left: 15rpx;
						}
					}
				}

				.cnt {
					color: #888888;
					font-size: 26rpx;
				}
			}
		}

		.settlement {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			text {
				color: red;
				font-size: 32rpx;
				font-weight: 700;
				padding-left: 20rpx;
			}

			.settlement_btn {
				width: 150rpx;
				height: 100rpx;
				line-height: 100rpx;
				background-color: red;
				color: #fff;
				text-align: center;
			}
		}

		::v-deep .pay {
			.popup-content {
				min-height: 50vh;
				background-color: #fff;
				border-radius: 15rpx 15rpx 0rpx 0rpx;
				position: relative;
				padding-bottom: 110rpx;

				.popup_title {
					font-size: 28rpx;
					display: flex;
					height: 80rpx;
					align-items: center;
					justify-content: center;
					border-radius: 15rpx 15rpx 0rpx 0rpx;
					position: relative;
					border-bottom: 1rpx solid #ccc;
				}

				.Refund {
					padding: 0rpx 20rpx;
					box-sizing: border-box;

					.function {
						font-size: 26rpx;
						line-height: 75rpx;
						border-bottom: 1rpx #ccc solid;

						text {
							margin-right: 10rpx;
						}
					}

					.desc {
						font-size: 26rpx;
						padding: 20rpx 0rpx;
						box-sizing: border-box;
						display: flex;

						text {
							margin-right: 10rpx;
						}
					}
				}

				.repair {
					padding: 0rpx 20rpx;
					box-sizing: border-box;

					.repair_ul {

						.repair_title,
						.repair_li {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							line-height: 75rpx;
							border-bottom: 1rpx #ccc solid;

						}

						.repair_title {
							color: deepskyblue;
						}

						.repair_li {
							&:nth-child(3) {
								.uni-easyinput {
									margin-right: 15rpx;
									flex: unset;
									width: 100rpx;

									.uni-easyinput__content-input {
										height: 50rpx;
									}

									.is-input-border {
										border: unset;
									}
								}

								.text_margin {
									padding: 0rpx 15rpx;
								}

								// picker {
								// 	width: 100rpx;
								// 	line-height: 70rpx;
								// 	border-bottom: 1rpx #ccc solid;
								// }
							}

							&:nth-child(5) {
								.uni-easyinput {
									margin: 0rpx 15rpx;
									flex: unset;
									width: 150rpx;

									.uni-easyinput__content-input {
										height: 50rpx;
									}
								}

								label {
									margin-left: 30rpx;

									checkbox {
										transform: scale(0.8);
									}
								}
							}

							&:last-child {
								.uni-easyinput {
									margin: 0rpx 15rpx;

									.uni-easyinput__content-input {
										height: 50rpx;
									}
								}

								border-bottom: none
							}
						}

					}
				}

				.Method_title {
					line-height: 60rpx;
					font-size: 26rpx;
					padding-left: 20rpx;
					background-color: #ccc;
				}

				.RefundMethod {
					.Method_title {
						color: deepskyblue;
						background-color: #fff;
					}

					.pay_ul {
						padding: 0rpx 20rpx;
						box-sizing: border-box;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.pay_li {
							width: 28%;
							border: 1rpx #ccc solid;
							border-radius: 10rpx;
							line-height: 60rpx;
							font-size: 26rpx;
							text-align: center;
							margin-top: 15rpx;
						}

						.active {
							border: 1rpx deepskyblue solid;
						}
					}
				}

				.popup_btn {
					width: 100%;
					position: absolute;
					bottom: 0rpx;
					left: 0rpx;
					background-color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					border-top: 1rpx solid #f1f1f1;
					padding: 15rpx 0rpx;

					view {
						width: 45%;
						font-size: 28rpx;
						line-height: 70rpx;
						text-align: center;
						border: 1rpx solid deepskyblue;
					}

					.close {
						color: deepskyblue;
					}

					.enter {
						color: #fff;
						background-color: deepskyblue;
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.ryStateDetails {
		height: 100vh;
	}
</style>